<template>
   <div class="tabbar-item" @click="itemClick">
      <div class="tabbar-icon" v-show="!isActive"><slot name='icon'></slot></div>
      <div class="tabbar-active-icon" v-show='isActive'><slot name='active-icon'></slot></div>
      <span class="tabbar-text" :style="textActive"><slot name='text'></slot></span>
   </div>
</template>

<script>
export default {
  name: 'tabbaritem',
  props: {
    link: {
      type: String,
      require: true
    }
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.link) !== -1
    },
    textActive() {
      return this.isActive ? { 'color': '#ff5777' } : {}
    }
  },
  methods: {
    itemClick() {
      this.$router.replace(this.link)
    }
  },
}
</script>

<style lang='stylus' scoped>
.tabbar-item
   flex 1
   text-align center
   .tabbar-active-icon, .tabbar-icon
     margin-bottom 3px
   .tabbar-icon img , .tabbar-active-icon img
     display block
     position relative
     left 50%
     width: 29px;
     height: 29px;
     margin-top: 5px;
     transform translateX(-50%)
     vertical-align: middle;
   .tabbar-text
     font-size: 12px
     margin-top: 3px
     color: #333s
</style>